<template>
    <div>

        <el-select v-model="searchType" placeholder="请选择查找类别">
            <el-option v-for="item in searchTypeTable" :label="item.label" :value="item.value"></el-option>
        </el-select>

        <el-button type="primary" icon="el-icon-search" style="position: relative;left: 10px;" @click="changeSearchType">搜索</el-button>

        <el-link style="position: relative;left: 55px;" type="primary">当前显示的是：{{auditMsg}}</el-link>


        <div>
            <el-table
                :data="roleAuditTable"
                style="width: 100%"
                :border = 'border'>

                <el-table-column
                    prop="auditId"
                    label="审核id"
                    width="60">
                </el-table-column>

                <el-table-column
                    prop="userId"
                    label="用户id"
                    width="100">
                </el-table-column>

                <el-table-column
                    prop="realName"
                    label="用户真实姓名"
                    width="100">
                </el-table-column>

                <el-table-column
                    prop="accountType"
                    label="申请类型"
                    width="100">
                    <template slot-scope="scope">
                        <el-tag :type="scope.row.accountType === 'seller'?'success':'primary'">{{scope.row.accountType}}</el-tag>
                    </template>
                </el-table-column>

                <el-table-column
                    prop="auditStatus"
                    label="审核状态"
                    width="100">
                    <template slot-scope="scope">
                        <el-tag v-if='scope.row.auditStatus === 0' type='primary'>待审核</el-tag>
                        <el-tag v-else-if='scope.row.auditStatus === 1' type='success'>审核通过</el-tag>
                        <el-tag v-else type='info'>审核不通过</el-tag>
                    </template>
                </el-table-column>

                <el-table-column label="身份证正面" width="100">
                    　　<template slot-scope="scope">
                    <el-image
                        style="width: 60px"
                        :src="scope.row.idCardFront"
                        :preview-src-list="scope.row.cf">
                    </el-image>
                    　　</template>
                </el-table-column>

                <el-table-column label="身份证反面" width="100">
                    　　<template slot-scope="scope">
                    <el-image
                        style="width: 60px"
                        :src="scope.row.idCardBack"
                        :preview-src-list="scope.row.cb">
                    </el-image>
                    　　</template>
                </el-table-column>

                <el-table-column label="营业执照" width="100">
                    　　<template slot-scope="scope">
                    <el-image
                        style="width: 60px"
                        :src="scope.row.businessLicense"
                        :preview-src-list="scope.row.bl">
                    </el-image>
                    　　</template>
                </el-table-column>

                <el-table-column
                    prop="remark"
                    label="用户留言"
                    width="150"
                    show-overflow-tooltip>
                </el-table-column>

                <el-table-column
                    prop="createTime"
                    label="申请时间"
                    width="150">
                </el-table-column>


                <el-table-column
                    fixed="right"
                    label="操作"
                    width="150">

                    <template slot-scope="scope">

                        <el-button @click="passMethod(scope.row)" type="text" size="small">通过</el-button>
                        <el-button @click="nopassMethod(scope.row)" type="text" size="small">不通过</el-button>

                    </template>
                </el-table-column>
            </el-table>



            <el-pagination
                background
                layout="prev, pager, next"
                @current-change='selectPage'
                :page-size='size'
                :total='total'>
            </el-pagination>

        </div>

        <div style='float: right;margin-bottom:80px'>
            <el-link type="primary">数据总条数:{{total}}</el-link>
        </div>

    </div>
</template>

<script>
export default {
    data(){
        return{
            auditMsg: '',
            roleAuditTable: [],
            currentSearchType: 'wait',
            searchType: 'wait',
            searchTypeTable:[
                {
                    label: '待审核',
                    value: 'wait'
                },
                {
                    label: '审核通过',
                    value: 'passed'
                },
                {
                    label: '审核不通过',
                    value: 'nopass'
                }
            ],
            border: true,
            total: 100, //总数
            size: 10, //没页数据条数
        }
    },
    created() {
        this.getFirstRoleAuditData();

    },
    methods:{
        //获取第一页用户信息
        getFirstRoleAuditData(){
            const _this = this;
            this.$http.get('dev-api/admin/ra/getAudit/wait/1/10')
                .then(function(resp){
                    if (resp.data.code === 0){
                        _this.roleAuditTable = resp.data.data.content;
                        _this.total = resp.data.data.total;
                        _this.auditMsg = '待审核';
                        _this.$message.success('获取数据成功')
                        console.log(_this.roleAuditTable)
                    }else{
                        _this.$message.error(resp.data.msg);
                    }
                })
        },
        //修改搜索类型
        changeSearchType(){
            const _this = this;
            this.currentSearchType = this.searchType;
            if (this.currentSearchType === 'wait'){
                this.auditMsg = '待审核'
            }else if (this.currentSearchType === 'passed'){
                this.auditMsg = '审核通过'
            }else{
                this.auditMsg = '审核不通过'
            }
            this.$http.get('dev-api/admin/ra/getAudit/'+this.currentSearchType+'/1/10')
                .then(function(resp){
                    if (resp.data.code === 0){
                        _this.roleAuditTable = resp.data.data.content;
                        _this.total = resp.data.data.total;
                    }else{
                        _this.$message.error(resp.data.msg);
                    }
                })
        },
        //查询某一页user数据
        selectPage(currentPage){
            const _this = this;
                this.$http.get('dev-api/admin/ra/getAudit/'+this.currentSearchType+'/'+currentPage+'/10')
                    .then(function(resp){
                        if (resp.data.code === 0){
                            _this.roleAuditTable = resp.data.data.content;
                            _this.total = resp.data.data.total;
                        }else{
                            _this.$message.error(resp.data.msg);
                        }
                    })
        },

        passMethod(row){
            const _this = this;
            this.$confirm('通过['+row.realName+']的['+row.accountType+']申请, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                _this.$http.get('dev-api/admin/ra/pass/'+row.auditId+'/'+row.accountType)
                .then(function(resp){
                    if (resp.data.code === 0){
                        _this.$message.success('成功')
                        _this.getFirstRoleAuditData();
                    }else{
                        _this.$message.error(resp.data.msg)
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },

        nopassMethod(row){

            const _this = this;
            this.$confirm('不通过['+row.realName+']的['+row.accountType+']申请, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                _this.$http.get('dev-api/admin/ra/reject/'+row.auditId)
                    .then(function(resp){
                        if (resp.data.code === 0){
                            _this.$message.success('成功')
                            _this.getFirstRoleAuditData();
                        }else{
                            _this.$message.error(resp.data.msg)
                        }
                    })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        }


    }
}
</script>
